<template>
  <div>
    <headerc :title="title"></headerc>
    <div class="c-main-make">
      <div class="title-text">数据筛选</div>
      <div style="marginTop: 20px">
        <el-form
          :inline="true"
          label-position="right"
          :label-width="formLabelWidth"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="专业:" label-width="80px">
            <el-select v-model="formInline.major" placeholder="请选择">
              <el-option label="高压电工" :value="1"></el-option>
              <el-option label="低压电工" :value="2"></el-option>
              <el-option label="仪表工" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属片区:">
            <el-select v-model="formInline.roomArea" placeholder="请选择片区">
              <el-option label="38万吨" :value="1"></el-option>
              <el-option label="90万吨" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配电室名称:">
            <el-input placeholder="请搜索配电室" v-model="formInline.roomName"></el-input>
          </el-form-item>
          <div style="padding: 0 30px">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onchongzhi"
                >清除查询条件</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="c-main-show">
      <div class="main-seting">
        <div>
          <!-- <el-button
            v-auth="'B03003'"
            style="
              float: right;
              margin-right: 20px;
              margin-bottom: 20px;
              margin-top: 20px;
            "
            icon="el-icon-download"
            >导出</el-button
          > -->
          <el-button
            v-auth="'B03002'"
            icon="el-icon-circle-plus-outline"
            type="primary"
            @click="addOpen"
            style="
              float: right;
              margin-right: 20px;
              margin-bottom: 20px;
              margin-top: 20px;
            "
            >添加</el-button
          >
          <el-dialog title="添加" :visible.sync="dialogFormVisible" center>
            <el-form ref="form11" :model="form11" :rules="rules" style="margin-left:80px;width:1000px;">
              <el-form-item
                label="专业"
                prop="major"
                :label-width="formLabelWidth"
              >
                <el-select v-model="form11.major" placeholder="请选择">
                  <el-option label="高压电工" :value="1"></el-option>
                  <el-option label="低压电工" :value="2"></el-option>
                  <el-option label="仪表工" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="归属片区"
                prop="roomArea"
                :label-width="formLabelWidth"
              >
                <el-select v-model="form11.roomArea" placeholder="请选择">
                  <el-option label="38万吨" :value="1"></el-option>
                  <el-option label="90万吨" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="使用表单"
                prop="recordType"
                :label-width="formLabelWidth"
              >
                <el-select v-model="form11.recordType" placeholder="请选择">
                  <el-option label="10KV变压器" :value="1"></el-option>
                  <el-option label="10KV操作室" :value="2"></el-option>
                  <el-option label="10KV干式变压器" :value="3"></el-option>
                  <el-option label="主变" :value="4"></el-option>
                  <el-option label="低压配电室" :value="5"></el-option>
                  <el-option label="仪表机柜间" :value="6"></el-option>
                  <el-option label="智能机器人班机柜间" :value="7"></el-option>
                  <el-option label="SF6气体密度继电器" :value="8"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="序号/编号" :label-width="formLabelWidth">
                <el-input
                  style="width: 41%"
                  v-model="form11.num"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="配电室名称"
                prop="roomName"
                :label-width="formLabelWidth"
              >
                <el-input
                  style="width: 41%"
                  v-model="form11.roomName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="巡检班组"
                prop="deptIds"
                :label-width="formLabelWidth"
              >
                <el-select
                  filterable
                  @change="optionfun"
                  v-model="value1"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  style="width: 41%"
                  v-model="form11.remark"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="deil">取 消</el-button>
              <el-button type="primary" @click="tijiao">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog title="修改" :visible.sync="dialog">
            <el-form :model="form11" :rules="rules">
              <el-form-item
                label="专业"
                prop="major"
                :label-width="formLabelWidth"
              >
                <el-select v-model="form11.major" placeholder="请选择">
                  <el-option label="高压电工" :value="1"></el-option>
                  <el-option label="低压电工" :value="2"></el-option>
                  <el-option label="仪表工" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="归属片区"
                prop="roomArea"
                :label-width="formLabelWidth"
              >
                <el-select v-model="form11.roomArea" placeholder="请选择">
                  <el-option label="38万吨" :value="1"></el-option>
                  <el-option label="90万吨" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="使用表单"
                prop="recordType"
                :label-width="formLabelWidth"
              >
                <el-select v-model="form11.recordType" placeholder="请选择">
                  <el-option label="10KV变压器" :value="1"></el-option>
                  <el-option label="10KV操作室" :value="2"></el-option>
                  <el-option label="10KV干式变压器" :value="3"></el-option>
                  <el-option label="主变" :value="4"></el-option>
                  <el-option label="低压配电室" :value="5"></el-option>
                  <el-option label="仪表机柜间" :value="6"></el-option>
                  <el-option label="智能机器人班机柜间" :value="7"></el-option>
                  <el-option label="SF6气体密度继电器" :value="8"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="巡检班组"
                prop="deptIds"
                :label-width="formLabelWidth"
              >
                <el-select
                  filterable
                  @change="iwanna"
                  v-model="form11.deptNames"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="序号/编号" :label-width="formLabelWidth">
                <el-input v-model="form11.num" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="配电室名称/线路名称"
                prop="roomName"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="form11.roomName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form11.remark" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="deil2">取 消</el-button>
              <el-button type="primary" @click="updatafun">更 新</el-button>
            </div>
          </el-dialog>
          <div style="margin: 20px">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              :header-cell-style="{ background: '#F6F7FB' }"
            >
              <el-table-column label="专业">
                <template slot-scope="scope">
                  <span>{{ zhuanfun(scope.row.major) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属片区">
                <template slot-scope="scope">
                  <span>{{ qufun(scope.row.roomArea) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="使用表单">
                <template slot-scope="scope">
                  <span>{{ formname(scope.row.recordType) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="num" label="序号/编号"></el-table-column>
              <el-table-column prop="roomName" label="配电室名称/线路名称">
              </el-table-column>
              <el-table-column prop="deptNames" label="巡检班组">
              </el-table-column>
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <span>{{ statusfun(scope.row.status) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="操作">
                <template slot-scope="scope">
                  <el-button
                    v-auth="'B03001'"
                    @click="handlebianji(scope.row)"
                    type="text"
                    size="small"
                    >修改</el-button
                  >
                  <!-- {{scope.row}} -->
                  <el-button
                    v-if="scope.row.status == 'false'"
                    @click="stopClick(scope.row)"
                    type="text"
                    size="small"
                  >
                    启用
                  </el-button>
                  <el-button
                    v-if="scope.row.status == 'true'"
                    @click="stopClick(scope.row)"
                    type="text"
                    size="small"
                  >
                    停用
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="fenye">
            <el-pagination
              v-if="isUpdate"
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="total"
              @current-change="currentChange"
              style="margin-left: 25%"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerc from '@/components/header.vue';
import utils from '@/utils/utils';
import {
  pdroomadd,
  pdroomgetAllByQuery,
  pdroomchangeStatus,
  deptlist,
  pdroomupdate,
  pdroomByParam,
  pdroomgetAllByRoomName,
  pdroomgetById,
} from '../../api/patrol-record';
export default {
  components: {
    headerc,
  },
  data() {
    return {
      roomList: [],
      isUpdate: false,
      options: [],
      value1: [],
      stop: 0,
      uid: '',
      updata: 1,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      rules: {
        major: [{ required: true, message: '请选择专业', trigger: 'change' }],
        roomName: [
          { required: true, message: '请选择配电室名称', trigger: 'change' },
        ],
        // deptIds: [
        //   { required: true, message: "请选择巡检班组",trigger: 'change'  },
        // ],
        recordType: [
          { required: true, message: '请选择使用表单', trigger: 'change' },
        ],
        roomArea: [
          { required: true, message: '请选择归属片区', trigger: 'change' },
        ],
      },
      bianjiId:'',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialog: false,
      form11: {
        major: '',
        roomArea: '',
        recordType: '',
        deptIds: '',
        num: '',
        roomName: '',
        remark: '',
        id: '',
        modifierId: '',
        deptNames: '',
      },
      formLabelWidth: '100px',
      formLabelWidth1: '130px',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      title: '配电室管理',
      form: '',
      formInline: {
        major: '',
        roomName: '',
        roomArea: '',
        roomName: '',
      },
      tableData: [],
      dialogVisible: false,
      dialogVisible2: false,
      //回显数组
      nameShow:[],
      iwannaList:[],
      PushListNow:[]
    };
  },
  created() {
    this.pdroomgetAllByQuery();
    this.getoption();
    this.getpdroomgetAllByQuery();
  },
  methods: {
    // closeDia(){
      
    //   this.form11 = {
    //     major: '',
    //     roomArea: '',
    //     recordType: '',
    //     deptIds: '',
    //     num: '',
    //     roomName: '',
    //     remark: '',
    //     id: '',
    //     modifierId: '',
    //     deptNames: '',
    //   }
    //   this.$refs.form11.resetFields()
    // },
    deil2(){
      this.dialog = false
      this.$refs.form11.resetFields()
      this.form11 = {
        major: '',
        roomArea: '',
        recordType: '',
        deptIds: '',
        num: '',
        roomName: '',
        remark: '',
        id: '',
        modifierId: '',
        deptNames: '',
      }
    },
    deil(){
      this.dialogFormVisible = false
      this.$refs.form11.resetFields()
      this.form11 = {
        major: '',
        roomArea: '',
        recordType: '',
        deptIds: '',
        num: '',
        roomName: '',
        remark: '',
        id: '',
        modifierId: '',
        deptNames: '',
      }
    },
    addOpen(){
      this.dialogFormVisible = true
      // console.log(this.form11)
      // this.$refs.form11.resetFields()
      this.form11 = {
        major: '',
        roomArea: '',
        recordType: '',
        deptIds: '',
        num: '',
        roomName: '',
        remark: '',
        id: '',
        modifierId: '',
        deptNames: '',
      }
      this.$refs.form11.resetFields()
    },
    //判断是否包含中文
    isChina(s){ 
      var patrn=/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; 
      if(!patrn.exec(s)){ 
      return false; 
      }
      else{ 
      return true; 
      } 
    },
    iwanna(val){
      console.log(val,'val')
      var [...thisNow] = val;
      for(var i in thisNow){
        let valChina = this.isChina(thisNow[i])
        if(valChina){
          // console.log("?????????")
          let obj = this.iwannaList.find(o => {
            console.log(o,"?????")
            return o.deptName === thisNow[i]
          });
          thisNow[i] = obj.deptId
          console.log(thisNow[i],obj.id,"~~~~~~~~");
        }
      }
      this.PushListNow = thisNow;
      console.log('到此为止',this.PushListNow)
      
    },
    getpdroomgetAllByQuery() {
      pdroomgetAllByQuery({
        pageNo: 1,
        pageSize: 5000,
      }).then((res) => {
        this.roomList = res.data.list;
      });
    },
    statusfun(data) {
      console.log(data);

      if (data == 'false') {
        return '已停用';
      } else if (data == 'true') {
        return '已启用';
      }
    },
    onchongzhi() {
      this.value1 = '';
      this.formInline = {
        major: '',
        roomName: '',
        roomArea: '',
      };
    },
    updatafun() {
      const data = {
        //巡检班组
        deptIds: this.PushListNow.toString(),
        //专业
        major: this.form11.major,
        //编号
        num: this.form11.num,
        //使用表单的类型
        recordType: this.form11.recordType,
        //备注
        remark: this.form11.remark,
        //所属片区
        roomArea: this.form11.roomArea,
        //配电室名称
        roomName: this.form11.roomName,
        id: this.bianjiId,
      };
      console.log(data);
      pdroomupdate(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.dialog = false;
          this.pdroomgetAllByQuery();
          this.form11 = {
            major: '',
            roomArea: '',
            recordType: '',
            deptIds: '',
            num: '',
            roomName: '',
            remark: '',
            id: '',
            deptNames:''
          };
        }
      });
    },
    getoption() {
      deptlist({ pageNo: 1, pageSize: 1000, isPage: false,deptLevel: 4 }).then((res) => {
        // console.log(r, '111111')
        this.options = res.data.list;
        console.log(this.options,res, '111111')
      });
    },
    createStateFilter2(queryString) {
      return (state) => {
        console.log(state);
        return state.roomName.indexOf(queryString.toLowerCase()) != -1;
      };
    },
    querySearchAsync2(queryString, cb) {
      var restaurants = this.restaurants2;
      var results = queryString
        ? restaurants.filter(this.createStateFilter2(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 0);
    },
    newsele() {
      pdroomgetAllByRoomName({
        roomName: this.formInline.roomName,
        recordType: 0,
      }).then((res) => {
        this.restaurants2 = res.data;
      });
    },
    handleinput(item) {
      this.formInline.roomName = item.roomName;
      this.form11.roomId = item.id;
    },
    optionfun(val) {
      const data = val.join(',');
      this.form11.deptIds = data;
    },
    zhuanfun(data) {
      if (data == 1) {
        return '高压电工';
      } else if (data == 2) {
        return '低压电工';
      } else if (data == 3) {
        return '仪表工';
      }
    },
    qufun(data) {
      if (data == 1) {
        return '38万吨';
      } else if (data == 2) {
        return '90万吨';
      }
    },
    formname(data) {
      if (data == 1) {
        return '10KV变压器';
      } else if (data == 2) {
        return '10KV操作室';
      } else if (data == 3) {
        return '10KV干式变压器';
      } else if (data == 4) {
        return '主变';
      } else if (data == 5) {
        return '低压配电室';
      } else if (data == 6) {
        return '仪表机柜间';
      } else if (data == 7) {
        return '智能机器人班机柜';
      } else if (data == 8) {
        return 'SF6气体密度继电器';
      }
    },
    handlebianji(val) {
      console.log(val)
      this.bianjiId = val.id
      pdroomgetById(val.id).then(res=>{
        console.log(res,"???????????")
        this.form11 = {
          major: res.data.major,
          roomArea: res.data.roomArea,
          recordType: res.data.recordType,
          deptNames: res.data.deptNames,
          remark: res.data.remark,
          id: res.data.id,
          roomName: res.data.roomName,
          num: res.data.num,
          // deptNames:res.data.relVOList
        };
        console.log(res.data.deptNames)
        //回显数组
        // this.nameShow = res.data.deptNames.split(',');
        // console.log(this.nameShow,"?!?!?!?!?!?!?")
        
        //默认
        // this.PushListNow = 
        //为了多选模糊搜索
        let [...iwannaNow] = res.data.relVOList;
        this.iwannaList = iwannaNow
        // let nameLists =  this.nameShow;
        let defaultId = [];
        let nameNow = [];
        for(var i in iwannaNow){
          // iwannaNow[i].name = nameLists[i]
          defaultId[i] = iwannaNow[i].deptId
          nameNow[i] = iwannaNow[i].deptName
        }
        // this.nameShow = nameNow
        //回显数组
        this.form11.deptNames = nameNow

        // this.iwannaList = iwannaNow
        this.PushListNow = defaultId
        // console.log(iwannaNow,defaultId,'hihihihihihihihihihi')
        // let idLists =  res.data.nonArrivalIds;
        // let iwanna = []
        // nameLists.forEach((item,index)=>{
        //   let items = {}
        //   items.name = item;
        //   items.id = idLists[index]
        //   iwanna.push(items)
        // })
        // this.iwannaList = iwanna
        // console.log(iwanna,"!!!!!!!!!!!!!!!!!!!!!!")
      })
      // this.form11 = {
      //   major: val.major,
      //   roomArea: val.roomArea,
      //   recordType: val.recordType,
      //   // deptNames: val.deptNames,
      //   remark: val.remark,
      //   id: val.id,
      //   roomName: val.roomName,
      //   num: val.num,
      // };
      // console.log("val",val.id)
      // this.form11.deptNames = val.deptnames;
      // this.options.push(this.selectionOne[1].id);
      // this.options
      // deptNames

      this.uid = val.id;
      this.updata = 2;
      this.dialog = true;
    },
    currentChange(pageNo) {
      this.pageNo = pageNo;
      this.pdroomgetAllByQuery();
    },
    async pdroomgetAllByQuery() {
      pdroomgetAllByQuery({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        major: this.formInline.major,
        roomName: this.formInline.roomName,
        roomArea: this.formInline.roomArea,
      }).then((res) => {
        console.log(res.data);
        // this.$forceUpdate()
        this.isUpdate = true;
        // deptNames: "机械动力处"
        // id: "617d01e4e4b09f1f3e4893b0"
        // major: 2
        // num: 1
        // recordType: 6
        // remark: "测试1"
        // roomArea: 1
        // roomName: "名称1"
        // status: "true"
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    tijiao() {
      const data = {
        //巡检班组
        deptIds: this.form11.deptIds,
        //专业
        major: this.form11.major,
        //编号
        num: this.form11.num,
        //使用表单的类型
        recordType: this.form11.recordType,
        //备注
        remark: this.form11.remark,
        //所属片区
        roomArea: this.form11.roomArea,
        //配电室名称
        roomName: this.form11.roomName,
      };
      pdroomadd(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.dialogFormVisible = false;
          this.pdroomgetAllByQuery();
          this.$refs.form11.resetFields()
          this.form11 = {
            major: '',
            roomArea: '',
            recordType: '',
            deptIds: '',
            num: '',
            roomName: '',
            remark: '',
            id: '',
            modifierId: '',
            deptNames: '',
          }
        }
      });
    },
    handleClick() {},
    onSubmit() {
      this.pageNo = 1;
      this.isUpdate = false;
      this.pdroomgetAllByQuery();
      console.log('submit');
      // const data = {
      //   major: this.formInline.major,
      //   roomName: this.formInline.roomName,
      //   roomArea: this.formInline.roomArea,
      //   pageNo: this.pageNo,
      //   pageSize: this.pageSize
      // }
      // pdroomgetAllByQuery(data).then((res) => {
      //   if (res.data.code == 200) {
      //     this.tableData = res.data.list
      //     this.total = res.data.list.length
      //   }
      // })
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    stopClick(val) {
      // console.log(val)
      if (val.status == 'true') {
        console.log(val);
        pdroomchangeStatus({ flag: 0, roomId: val.id }).then((res) => {
          this.pdroomgetAllByQuery();
        });
      } else if (val.status == 'false') {
        pdroomchangeStatus({ flag: 1, roomId: val.id }).then((res) => {
          this.pdroomgetAllByQuery();
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.c-main-make {
  background: #fff;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.c-main-show {
  padding-bottom: 20px;
  background: #fff;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.title-text {
  width: 100%;
  height: 50px;
  border-bottom: 1px #dcdee0 solid;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', 微软雅黑, sans-serif;
  font-weight: 700;
  color: #666666;
  line-height: 50px;
  padding-left: 25px;
}
.fenye {
  display: flex;
  justify-content: right;
}
</style>
